<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态图片滚动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#container{
				width: 100%;
				height: 600px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				position: relative;
			}
			#out-div{
				margin-top: 200px;
				width: 600px;
				height: 100px;	
				overflow: hidden;
				border: 1px red solid;
			}
			#img-list-div{
				width: 1800px;
				height: 100px;
				display: flex;
			}
			#img-list-div img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="out-div">
				<div id="img-list-div">
					<img src="img/lunbo/1.jpeg" >
					<img src="img/lunbo/2.jpeg" >
					<img src="img/lunbo/3.jpeg" >
					<img src="img/lunbo/4.jpeg" >
					<img src="img/lunbo/5.jpeg" >
					<img src="img/lunbo/6.jpeg" >
					<img src="img/lunbo/7.jpeg" >
					<img src="img/lunbo/8.jpeg" >
					<img src="img/lunbo/9.jpeg" >
					<img src="img/lunbo/10.jpeg" >
					<img src="img/lunbo/1.jpeg" >
					<img src="img/lunbo/2.jpeg" >
					<img src="img/lunbo/3.jpeg" >
					<img src="img/lunbo/4.jpeg" >
					<img src="img/lunbo/5.jpeg" >
					<img src="img/lunbo/6.jpeg" >
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var defaultMarginLeft = 0;
		var isBegin = true;
		var myinterval = null;
		document.getElementById('img-list-div').onmouseenter = function(){
			isBegin = false;
		}
		document.getElementById('img-list-div').onmouseleave = function(){
			isBegin = true;
		}
		function imagAction(){
			if(!isBegin){
				return;
			}
			var imgListDivObj = document.getElementById('img-list-div');
			defaultMarginLeft--;
			if(defaultMarginLeft<=-100*10){
				defaultMarginLeft =0;
			}
			if(defaultMarginLeft%100 == 0){
				clearInterval(myinterval);
				setTimeout(function(){
					myinterval = setInterval(imagAction,10)
				},1000)
			}else{
				imgListDivObj.style.marginLeft=defaultMarginLeft+'px';						
			}
		}

		onload = function(){
			myinterval = setInterval(imagAction,10)
		}
	</script>
</html>
